import React from 'react'
import { Table, Divider, Button } from 'antd'

import { ColumnProps } from 'antd/lib/table'
import { SAVETYPE } from '~/constants'

const colums = ({
  setSelectVisible,
  setSelectedItems,
  form,
  selectedItems,
  setSaveType,
  setModifyIndex,
  onClickAddItems
}: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center'
  },
  {
    title: '数量（单位）',
    dataIndex: 'totalNumber',
    align: 'center',
    render: (_, record) => (
      <div>
        {record.totalNumber}
        {record.unitName}
      </div>
    )
  },
  {
    title: '识别信息',
    dataIndex: 'idInfo',
    key: 'idInfo',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    fixed: 'right',
    render: (_, record, index) => (
      <div>
        <Button type="primary" size="small" onClick={onClickAddItems}>
          添加
        </Button>
        <Divider type="vertical" />
        <Button
          type="primary"
          size="small"
          onClick={() => {
            selectedItems.splice(index, 1)
            setSelectedItems([...selectedItems])
          }}
        >
          删除
        </Button>
        <Divider type="vertical" />
        <Button
          type="primary"
          size="small"
          onClick={() => {
            form.setFieldsValue(record)
            setSelectVisible(true)
            setSaveType(SAVETYPE.update)
            setModifyIndex(index)
          }}
        >
          修改
        </Button>
      </div>
    )
  }
]

const WaitingList = ({
  setSelectVisible,
  selectedItems,
  setSelectedItems,
  form,
  setSaveType,
  setModifyIndex,
  onClickAddItems
}: any) => {
  console.log('渲染', selectedItems)
  return (
    <div>
      <Table
        rowKey="totalNumber"
        dataSource={selectedItems}
        pagination={{
          size: 'default',
          total: selectedItems.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        columns={colums({
          setSelectVisible,
          setSelectedItems,
          form,
          selectedItems,
          setSaveType,
          setModifyIndex,
          onClickAddItems
        })}
        bordered
      />
    </div>
  )
}

export default WaitingList
